<!--
 * @Description: 背景的四个底角
 * @Version: 1.0.0
 * @Autor: zhou
 * @Date: 2022-04-13 08:36:13
 * @LastEditors: zhou
 * @LastEditTime: 2022-06-25 15:49:13
-->

<template>
    <div class="corner" :style="{ 
                    '--bcolor': b_color, 
                    '--line_width': line_width + 'px', 
                    '--line_len': line_len + 'px', }">
        <div class="item left-t"></div>
        <div class="item left-b"></div>
        <div class="item right-t"></div>
        <div class="item right-b"></div>
    </div>
</template>

<script>
export default {
    name: "Corner",
    props: {
        line_width: {
            type: [String, Number],
            default: 2
        },
        line_len: {
            type: [String, Number],
            default: 11
        },
        b_color: {
            type: String,
            default: "#00A2ED",
        },
    },
    data() {
        return {};
    },
    computed: {},
    methods: {
    },
};
</script>

<style lang="scss" scoped>
.corner {
    .item {
        width: var(--line_len);
        height: var(--line_len);
        position: absolute;
        z-index: 2000;
    }
    .left-t {
        left: 0;
        top: 0;
        border-left: var(--line_width) solid var(--bcolor);
        border-top: var(--line_width) solid var(--bcolor);
    }
    .left-b {
        left: 0;
        bottom: 0;
        border-left: var(--line_width) solid var(--bcolor);
        border-bottom: var(--line_width) solid var(--bcolor);
    }
    .right-t {
        right: 0;
        top: 0;
        border-right: var(--line_width) solid var(--bcolor);
        border-top: var(--line_width) solid var(--bcolor);
    }
    .right-b {
        right: 0;
        bottom: 0;
        border-right: var(--line_width) solid var(--bcolor);
        border-bottom: var(--line_width) solid var(--bcolor);
    }
}
</style>
